<template>
    <div class="admin-add-wrap">
        <el-form ref="adminForm" class="adminForm" :model="addAdminParams" label-width="100">
            <el-form-item label="管理员名称" prop="adminname">
                <el-input v-model="addAdminParams.adminname"></el-input>
            </el-form-item>
            <el-form-item label="管理员密码" prop="password">
                <el-input type="password" v-model="addAdminParams.password" show-password></el-input>
            </el-form-item>
            <el-form-item label="管理员等级" prop="role" >
                <el-select v-model="addAdminParams.role" placeholder="">
                    <el-option label="超级管理员" value="1"></el-option>
                    <el-option label="普通管理员" value="2"></el-option>
                    <el-option label="普通用户" value="3"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item  >
                <el-button type="primary" @click="submitHandler">确定</el-button>
                <el-button type="primary" @click="resetHandler">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { getAdminListAPI, delAdminAPI,addAdminAPI } from '@/api/admin';
import { ElMessageBox } from 'element-plus';

export default {
    name: "AdminAddView",
    data() {
        return {
            addAdminParams:{
                adminname:"",	
                password:"",
                role:"",
                checkedKeys:"",
            },
            rules:{
                adminname:[{type:"string",required:true,message:"请输入管理员名称",trigger:"blur"}],	
                password:[{type:"string",required:true,message:"请输入管理员密码",trigger:"blur"}],
                role:[{type:"string",required:true,message:"请选择管理员等级",trigger:"blur"}],
            },
        }
    },
    methods: {
        async addAdmin() {
            try {
                let result = await addAdminAPI(this.addAdminParams);
                console.log("新增成功", result);
                this.$router.push("/admin/list");
            } catch (err) {
                throw err;
            }
        },
        async submitHandler(){
            try {
                await this.addAdmin();
                this.$refs.adminForm.resetFields();
            } catch (err) {
                ElMessage({
                    type: "error",
                    message: err.message,
                })
            }
        }
        
    },
    mounted() {
    },
    beforeRouteLeave(to,from,next){
        if(this.addAdminParams.adminname== "" && this.addAdminParams.password=="" && this.addAdminParams.role==""&&this.addAdminParams.checkedKeys==""){
            next()
        }else{
            ElMessageBox.confirm("数据还未保存是否离开","提示",{
                type:"warning"
            }).then(()=>{
                next();
            }).catch(()=>{
                next(false);
            })

        }
    }   
}
</script>

<style lang="scss" scoped>
.admin-add-wrap {
    padding: 20px;
}
.adminForm{
    width: 50%;
}
</style>